<template>
  <div class="index" id="choose-dducation">
    <div class="top-banner-box"></div>
    <ul class="list-box">
      <li class="list-item-box">
        <div class="van-row">
          <div class="van-col van-col--24">
            <div class="education-title-box flex-bet">
              <p class="question-title education-title">身份学历</p>
              <p class="rp">单选</p>
            </div>
          </div>
        </div>
        <div class="van-cell" @click="tog(item.id,index)" v-for="(item,index) in list" :key="index">
          <div class="van-cell__value van-cell__value--alone">
            <div tabindex="0" class="mu-checkbox " :class="zindex==index?'mu-checkbox-checked':''" >
              <input value="1" type="checkbox" tabindex="-1" />
              <div class="mu-checkbox-wrapper">
                <div class="mu-checkbox-icon">
                  <div class="mu-checkbox-ripple-wrapper"></div>
                  <svg viewBox="0 0 24 24" class="mu-radio-icon-uncheck mu-radio-svg-icon"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>
                  <svg viewBox="0 0 24 24" class="mu-radio-icon-checked mu-radio-svg-icon"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>
                </div>
                <div class="mu-checkbox-label">{{item.name}}</div>
              </div>
            </div>
          </div>
        </div>
        <!--van-cell-->
      </li>
    </ul>
    <div class="btn-box" @click="jump">提交</div>
  </div>
</template>
<script>
export default {
  name: "chooseProject",
  data: function () {
    return {
      search: "",
      is:true,
      list:[
        {id:18,name:"台资企业",on:false},
        {id:19,name:"文创企业",on:false},
        {id:20,name:"软件信息与服务企业",on:false},
        {id:21,name:"制造业",on:false},
        {id:22,name:"重点产业企业",on:false},
        {id:23,name:"三高企业",on:false},
      ],
      identity:'q',
      zindex:0,
      cateId:18
    };
  },
  mounted() {
    if (this.$route.meta) {
      this.title = this.$route.meta.title;
    }
  },
  watch: {},

  methods: {
    tog(id,index){
      this.zindex = index;
      this.cateId = id;
      // this.$router.push({path:'/questions?cateId='+id+"&identity="+this.identity})
    },
    jump(){
      this.$router.push({path:'/citya?cateId='+this.cateId+"&identity="+this.identity})
    }
  },
};
</script>
<style scoped>
.index {
  background: #eee;
}
#choose-dducation .top-banner-box {
  height: 200px;
  background: transparent
    url(../../assets/policy/supply-policy.png) no-repeat 50%/cover;
}
#choose-dducation .list-box {
  margin-top: -70px;
}
#choose-dducation .list-item-box {
  background: #fff;
  margin: 10px;
  border-radius: 5px;
  overflow: hidden;
}
.van-col {
  float: left;
  box-sizing: border-box;
  min-height: 1px;
}
.van-col--24 {
  width: 100%;
}
.rp{
  padding-right: 16px;
}
#choose-dducation .area-title-box, #choose-dducation .honour-title-box {
    border-bottom: 1px solid #ddd;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}
#choose-dducation .area-title,
#choose-dducation .education-title,
#choose-dducation .honour-title {
  height: 45px;
  line-height: 45px;
  padding-left: 50px;
}
#choose-dducation .education-title {
  background: transparent
    url() no-repeat left 15px center/25px;
}
.van-row:after {
  display: table;
  clear: both;
  content: "";
}
.van-cell {
    position: relative;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 16px;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
}
.van-cell__value {
    position: relative;
    overflow: hidden;
    color: #969799;
    text-align: right;
    vertical-align: middle;
}
.van-cell__value--alone {
    color: #323233;
    text-align: left;
}
#choose-dducation .van-cell__value {
    overflow: initial;
}
.van-cell:not(:last-child):after {
    position: absolute;
    box-sizing: border-box;
    content: " ";
    pointer-events: none;
    right: 0;
    bottom: 0;
    left: 16px;
    border-bottom: 1px solid #ebedf0;
    transform: scaleY(.5);
}
.mu-checkbox {
    position: relative;
    display: inline-block;
    height: 24px;
    line-height: 24px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
    color: rgba(0,0,0,.54);
}
#choose-dducation .mu-checkbox, #choose-dducation .mu-radio {
    width: 100%;
}
.mu-checkbox input[type=checkbox] {
    display: none;
}
button, input {
    overflow: visible;
}
button, input, select, textarea {
    font: inherit;
    margin: 0;
}
.mu-checkbox-wrapper {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 24px;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.mu-checkbox-wrapper {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 24px;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.mu-checkbox-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    position: relative;
    margin-right: 8px;
}
.mu-checkbox-ripple-wrapper {
    width: 48px;
    height: 48px;
    top: -12px;
    left: -12px;
    position: absolute;
}
svg:not(:root) {
    overflow: hidden;
}
.mu-checkbox-checked .mu-checkbox-icon-uncheck {
    opacity: 0;
    transition: opacity .65s cubic-bezier(.23,1,.32,1) .15s;
}
.mu-checkbox-icon-uncheck {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    transition: opacity 1s cubic-bezier(.23,1,.32,1) .2s;
}
.mu-checkbox-icon-checked {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transform: scale(0);
    transition: opacity .45s cubic-bezier(.23,1,.32,1),transform 0ms cubic-bezier(.23,1,.32,1) .45s;
}
.mu-checkbox-checked .mu-checkbox-icon-checked {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0ms cubic-bezier(.23,1,.32,1),transform .8s cubic-bezier(.23,1,.32,1);
}
.mu-radio-ripple-wrapper {
    width: 48px;
    height: 48px;
    top: -12px;
    left: -12px;
    position: absolute;
}
.mu-radio-icon-checked, .mu-radio-icon-uncheck {
    position: absolute;
    left: 0;
    top: 0;
    transition: all .45s cubic-bezier(.23,1,.32,1);
}
#choose-dducation .mu-checkbox-checked, #choose-dducation .mu-radio-checked {
    color: #0cc077;
}
.mu-radio-icon-uncheck {
    opacity: 1;
}
.mu-checkbox-checked .mu-radio-icon-uncheck {
    opacity: 0;
    transform: scale(0);
}
.mu-radio-icon-checked {
    opacity: 0;
    transform: scale(0);
}
.mu-checkbox-checked .mu-radio-icon-checked {
    opacity: 1;
    transform: scale(1);
}


.mu-checkbox-svg-icon {
    display: inline-block;
    fill: currentColor;
    height: 24px;
    width: 24px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.mu-radio-svg-icon {
    display: inline-block;
    fill: currentColor;
    height: 24px;
    width: 24px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#choose-dducation .mu-checkbox-label, #choose-dducation .mu-radio-label {
    -ms-flex-positive: 1;
    flex-grow: 1;
}
.mu-checkbox-label {
    color: rgba(0,0,0,.87);
}
#choose-dducation .btn-box {
    margin: 10px;
    margin-top: 20px;
    padding: 15px;
    text-align: center;
    color: #fff;
    border-radius: 50px;
    background: linear-gradient(90deg,#0bbf76,#3ab8c4);
}
</style>
